import { Dialog } from 'vant'

export default {
  // 此处编写的就是 Vue 组件实例的 配置项，通过一定语法，就可以直接混入到组件内部
  // data methods computed 生命周期函数 等等
  // 注意：
  // 1. 如果此处和组件内，提供了同名的 data 或 methods ，则组件内优先级更高
  // 2. 如果编写了生命周期函数，则 mixins 的生命周期函数和页面的生命周期函数，会用数组管理统一执行
  created () {
    // console.log('abc')
  },
  data () {
    return {
      title: '标题'
    }
  },
  methods: {
    sayHi () {
      // console.log('你好')
    },
    // 根据登录状态，判断是否需要显示登录确认
    // 1. 如果未登录 => 显示确认框 - 返回 true
    // 2. 如果已登录 => 啥也不干  - 返回 false
    loginConfirm () {
      // 判断 token 是否存在
      // 1. 如果不存在，弹确认框
      // 2. 如果存在，继续请求操作
      if (!this.$store.getters.token) {
        // 弹确认框
        // console.log('弹确认框')
        Dialog.confirm({
          title: '温馨提示',
          message: '需要登录才能继续操作',
          confirmButtonText: '去登录',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            // .then 点击 确认 要做的事
            // 如果希望跳转到登录，并登录后回到本页面，需要在跳转的时候携带参数
            // 参数是当前的路由地址 - this.$route.fullPath(带查询参数)   .path(不带参数)
            // 并且需要在 login.vue 中添加判断代码
            // this.$router.push('/login')
            // this.$router.push({
            // 使用 replace 替换而非 push
            // 有个 bug ：如果在登录页面未登录，而是直接返回，此时跳到 商品首页 而非 商品详情页
            this.$router.push({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          // .catch 点击 取消 要做的事
          .catch(() => { })
        // 弹了确认框 - 未登录
        return true
      }
      // 未弹确认框 - 已登录
      return false
    }
  }
}
